<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="header col-md-2">
            <div class="logo">
                <a href="#">
                    <img src="./images/logo.png" alt="" class="hidden-xs">
                    <span class="visible-xs">阿里百秀</span>
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-camera">自然馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-camera">科技馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-camera">奇趣事</a></li>
                    <li><a href="#" class="glyphicon glyphicon-camera">美食杰</a></li>
                </ul>

            </div>
        </div>


        <div class="article col-md-7">
            <!-- 新闻 -->
            <div class="news clearfix">
                <ul>
                    <li> <a href=""><img src="./upload/lg.png" alt=""><p>阿里百秀</p></a></li>
                    <li><a href=""><img src="./upload/1.jpg" alt=""><p>阿里百秀</p></a></li>
                    <li><a href=""><img src="./upload/2.jpg" alt=""><p>阿里百秀</p></a></li>
                    <li><a href=""><img src="./upload/3.jpg" alt=""><p>阿里百秀</p></a></li>
                    <li><a href=""><img src="./upload/4.jpg" alt=""><p>阿里百秀</p></a></li>
                </ul>
            </div>

            <!-- 发表模块 -->
            <div class="publish">
                <div class="row">
                    <div class="col-md-9">
                        <h3>生活馆 关于指甲得是个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2021-11-23</p>
                        <p class="hidden-xs">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        <p class="text-muted">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        
                    </div>
                    <div class="pic col-md-3">
                        <img src="./upload/3.jpg" alt="" class="hidden-xs">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-9">
                        <h3>生活馆 关于指甲得是个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2021-11-23</p>
                        <p class="hidden-xs">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        <p class="text-muted">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        
                    </div>
                    <div class="pic col-md-3">
                        <img src="./upload/3.jpg" alt="" class="hidden-xs">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-9">
                        <h3>生活馆 关于指甲得是个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2021-11-23</p>
                        <p class="hidden-xs">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        <p class="text-muted">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        
                    </div>
                    <div class="pic col-md-3">
                        <img src="./upload/3.jpg" alt="" class="hidden-xs">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-9">
                        <h3>生活馆 关于指甲得是个健康知识 你知道几个？</h3>
                        <p class="text-muted hidden-xs">alibaixiu 发布于 2021-11-23</p>
                        <p class="hidden-xs">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        <p class="text-muted">WordPress XIU主题5.3版本扁平化、简洁风、多设备支持、多功能配,适用于</p>
                        
                    </div>
                    <div class="pic col-md-3">
                        <img src="./upload/3.jpg" alt="" class="hidden-xs">
                    </div>
                </div>

            </div>
        </div>

        <div class="aside col-md-3">
            <a href="#" class="banner">
                <img src="./upload/zgboke.jpg" alt="">
            </a>
            <a href="#" class="hot">
                <span class="btn btn-primary">热搜</span>
                <h4>欢迎加入中国博客联盟</h4>
                <p>若您使用收费的软件或服务请购买正版授权并合法使用,本站发布的内容若侵犯到您的权益请联系站长删除,我们将及时处理。</p>
            </a>


        </div>
    </div>
</body>

</html>